<template>
  <div class="edit-app-dialog">

    <el-dialog
        v-model="dialogVisible"
        :before-close="handleClose"
        title="编辑终端信息"
        width="500px"
       
    >

      <el-form
          ref="ruleForm"
          :model="formData"
          :rules="rules"
          class="demo-ruleForm"
          label-width="140px"
          size="small"
      >
        <el-form-item label="终端名称" prop="terminalName">
          <span>{{ formData.terminalName }}</span>
        </el-form-item>

        <el-form-item label="所在地区">
          <span>{{ formData.area }}</span>
          <!--                    <el-input v-model="formData.area"></el-input>-->
        </el-form-item>

        <el-form-item label="终端价：" prop="terminalPrice">
          <app-price-popover ref="pricePop" :props-product="copyData" @confirm="priceConfirm">
            <el-select v-model="formData.terminalPrice" placeholder="请选择终端价" @clear="priceClear" @focus="priceFocus">
              <template #empty/>
            </el-select>
          </app-price-popover>
        </el-form-item>

        <el-form-item label="准入模式">
          <span>{{ getLabel('access_mode', formData.accessMode) }}</span>
        </el-form-item>

        <el-form-item label="开发期限截止日期" prop="date">
          <date-picker v-model:date="formData.date" :disabled-date="disabledDate" placeholder="请选择截止日期"
                       @change="dateChange"/>
        </el-form-item>

        <el-form-item label="开发保证金" prop="devEarnestMoney">
          <el-input v-model="formData.devEarnestMoney" oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                    placeholder="请输入开发保证金"/>
        </el-form-item>

        <el-form-item label="最低销量">

          <el-input v-model="formData.minSale" placeholder="请输入最低销量">
            <template #append>
              <span v-if="propsProduct.sellUnit"
                    style="margin-right: 10px">{{ getLabel('sell_unit', propsProduct.sellUnit) }}/</span>
              <el-select v-model="formData.minSaleUnit" placeholder="" style="width: 80px">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </template>
          </el-input>

        </el-form-item>

        <el-form-item label="销量保证金" prop="sellEarnestMoney">

          <el-input v-model="formData.sellEarnestMoney" clearable
                    oninput="value=value.replace(/^\.+|[^\d.]/g,'')" placeholder="请输入销量保证金" @blur="salesPriceBlur"/>

        </el-form-item>

        <el-form-item label="其他说明" prop="remark">

          <el-input v-model="formData.remark" clearable placeholder="请输入其他说明"/>

        </el-form-item>

      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose"  size="small">取消</el-button>
          <el-button type="primary" @click="dialogConfirm"  size="small">确定</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import {crmStore} from "../../../../../../store";
import {defineComponent, reactive, ref, toRefs} from 'vue'

export default defineComponent({
  name: 'editTerminaDialog',
  props: {
    propsProduct: {
      type: Object,
      default: {}
    },
  },
  setup(props, {emit}) {
    const options = crmStore.getters['dictionary/getDictionary']['sell_num_unit']
    const rules = ref({
      terminalName: [
        {
          required: true,
          message: '请输入终端名称',
          trigger: 'change',
        },
      ],
      devEarnestMoney: [
        {
          required: true,
          message: '请输入开发保证金',
          trigger: 'blur',
        },
      ],
      date: [
        {
          type: 'date',
          required: true,
          message: '请选择结束日期',
          trigger: 'change',
        },
      ],
      terminalPrice: [
        {
          required: true,
          message: '请选择终端价',
          trigger: 'change',
        },
      ]
    })

    var data = reactive({
      dialogVisible: false,
      formData: {
        terminalId: '',
        terminalName: '',
        area: '',
        date: '',
        expireTime: '',
        devEarnestMoney: '',
        exploitStr: '',
        minSale: 0,
        minSaleUnit: '1',
        sellEarnestMoney: '',
        remark: '',
        terminalPrice: 0,
        productPriceId: 0,
        accessMode: '',
      },
      pricePop: null,
      copyData: {}
    })

    const handleClose = () => {
      data.dialogVisible = false
    }

    const dialogConfirm = () => {
      data.dialogVisible = false
      const a = {...data.formData}
      a.devEarnestMoney = Number(a.devEarnestMoney)
      a.sellEarnestMoney = Number(a.sellEarnestMoney)
      a.minSale = Number(a.minSale)
      emit('confirm', a)
    }

    const openDialog = (val) => {
      console.log(val)
      data.formData = {...val}
      data.copyData = {...props.propsProduct}
      data.copyData.terminalId = val.terminalId
      data.copyData.terminalType = val.terminalType
      data.dialogVisible = true
      console.log(data.formData)
    }

    const disabledDate = (time) => {
      return !(time.getTime() > Date.now())
    }

    const priceConfirm = (val) => {
      data.formData.productPriceId = val.id
      data.formData.terminalPrice = Number(val.terminalPrice)
      data.formData.accessMode = val.accessMode
    }

    const priceFocus = (val) => {
      if (val) {
        data.pricePop.openPopover()
      } else {

      }
    }

    const priceClear = () => {
      data.formData.productPriceId = 0
      data.formData.terminalPrice = 0
      data.formData.accessMode = ''
    }

    const dateChange = () => {
      if (data.formData.date) {
        data.formData.expireTime = data.formData.date
      }// currentInstance.proxy.dateFormat('yyyy-mm-dd HH:MM:SS',formData.date)
    }

    const salesBlur = (row) => {
      if (data.formData.minSale) {
        data.formData.minSale = Number(data.formData.minSale)
      } else {
        data.formData.minSale = 0
      }
    }

    const salesPriceBlur = (row) => {
      if (data.formData.sellEarnestMoney) {
        data.formData.salesStr = '¥' + data.formData.sellEarnestMoney
        data.formData.sellEarnestMoney = Number(data.formData.sellEarnestMoney)
      } else {
        data.formData.salesStr = ''
        data.formData.sellEarnestMoney = 0
      }
    }

    return {
      ...toRefs(data),
      rules,
      options,

      handleClose,
      dialogConfirm,
      openDialog,
      priceConfirm,
      priceFocus,
      priceClear,
      disabledDate,
      dateChange,
      salesBlur,
      salesPriceBlur,
    }
  }
})
</script>

<style lang="scss" scoped>

.edit-app-dialog {
  .el-autocomplete {
    width: 100%;
  }

  .el-input {
    width: 100%;
  }

  .specail-input {
    display: flex;

    .el-input__inner {
      border-radius: 5px 0 0 5px;
    }

    .el-select {
      width: 110px;

      .el-input__inner {
        border-radius: 0 5px 5px 0;
        border-left: 0;
      }
    }
  }
}
</style>

